<template>
  <div class="home">
    <div class="home-header">
      <homeSlider :images="images"></homeSlider>
    </div>
    <!--<div class="home-Middle" v-show="HomeallCategories.length >0">-->
    <div class="home-Middle">
      <div class="home-Middle-title">SHOP BY CATEGORY</div>
      <div class="See-more" @click="SeeMore">See more</div>
      <ul class="Middle-classification-box">
        <li class="classification-item" v-for="(item, index) in imgList" @click="selectItem(item,index)"
            :key="index">
          <a>
            <div class="hover-box">
              <div class="classification-img">
                <img :src="item.classurl">
              </div>
              <div class="Categories-class">{{item.name}}</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
    <div class="home-process">
      <div class="home-process-title">How to Earn Cash Back</div>
      <ul class="process-list">
        <li class="process-item" v-for="(item, index) in process" :key="index">
          <div class="process-icon"><img :src="item.src" :alt="item.alt"></div>
          <div class="process-content">{{item.content}}</div>
        </li>
      </ul>
    </div>
    <div class="home-service">
      <ul class="service-list">
        <li class="service-itemL">
          <div class="item-title">Our Service</div>
          <div class="item-content">
            We provide you favoriate products and at the same tine save money for you. we will fight for the biggest
            cashback discount with super fast cash back for you.
          </div>
        </li>
        <li class="service-itemR">
          <div class="item-title">We Love Your Requirements</div>
          <div class="item-content">
            We sincerely hope that you can find the products you like. If you still can't find the products you like,
            please feel free to ask us for the product requirements, we will do our best to meet your needs.
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import homeSlider from './homeSlider'
  import {getCategory} from 'common/js/dom'
  import {mapMutations, mapGetters} from 'vuex'

  export default {
    metaInfo: {
      meta: [
        {                 // set meta
          name: 'keyWords',
          content: 'Shop Meet50off'
        },
        {
          name: 'og:url',
          content: 'https://test.meet50off.com'
        }
      ]
    },
    data() {
      return {
        //分类图
        imgList: [
          {classurl: '../../../static/img/clothes.png', name: '1'},
          {classurl: '../../../static/img/Healthy.png', name: '2'},
          {classurl: '../../../static/img/Computer.png', name: '3'},
          {classurl: '../../../static/img/Park.png', name: '4'},
          {classurl: '../../../static/img/motion.png', name: '5'},
          {classurl: '../../../static/img/Toys.png', name: '6'},
          {classurl: '../../../static/img/PetSupplies.png', name: '7'},
        ],
        //轮播图
        images: [
          {src: require('../../../static/img/lunbo1.jpg'), name: '1'},
          {src: require('../../../static/img/lunbo1.jpg'), name: '2'},
        ],
        //流程icon
        process: [
          {
            src: require('../../../static/img/Browse_icon.png'),
            content: 'Browse our website and choose the products you like',
            alt: 'Browse'
          },
          {
            src: require('../../../static/img/cart_icon.png'),
            content: 'Add to cart by clicking Cashback Now',
            alt: 'Add to cart'
          },
          {
            src: require('../../../static/img/order-icon.png'),
            content: 'Place an order on the amazon page by clicking BUY ON AMAZON',
            alt: 'Place an order'
          },
          {
            src: require('../../../static/img/fill_icon.png'),
            content: 'Return to the meet50off page, fill in the amazon order number and paypal payment account',
            alt: 'Fill in the order and paypal'
          },
          {
            src: require('../../../static/img/account-icon.png'),
            content: 'Meet50off will cash back to your paypal account within 48 hours',
            alt: 'cash back'
          }
        ],
        imgUrl: imgUrl,
        homes: [],
        sku: '',
        homeTopTwo: {},
        homeTopThree: {},
        PageNumber: 1,
        homeSecond: [],
        totalPages: 0,
        largeStar: 4,
        largeComment: 4,
        star: 4,
        comment: 4,
        ExcludedSkus: [],   //置顶产品sku
        HomeallCategories: [], //首页分类
        isCashback: false,
        TreeShapeCategories: []
      }
    },
    created() {
      const _this = this
      let t1 = setInterval(() => {
        _this.TreeShapeCategories = JSON.parse(window.localStorage.getItem("TreeShapeCategories"))
        if (_this.TreeShapeCategories !== null) {
          clearInterval(t1);
          for (let i = 0; i < 7; i++) {
            _this.HomeallCategories.push(_this.TreeShapeCategories[i])
          }
        }
      }, 100)
    },
    methods: {
      _category(id) {
        return getCategory(id)
      },
      selectItem(item, index) {
        let nameAry = item.name.replace(/,/g, '').replace(/ & /g, ' ').split(' ');
        let name = nameAry.join('-')
        this.$router.push({
          path: `/categories/${name}`
        })
        this.setCategoryIndex(index)
        this.setCategories(item)
        this.setCategoryName(item.name)
        this.setFocus(1)
      },
      SeeMore() {
        this.$router.push({path: `/all-categories`})
      },
      ...mapMutations({
        setCategoryName: 'SET_CATEGORY_NAME',
        setCategoryIndex: 'SET_CATEGORY_INDEX',
        setCategories: 'SET_CATEGORIES',
        setFocus: 'SET_CATEGORY_FOCUS'
      })
    },
    components: {
      homeSlider
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/index"
  .home
    .home-title
      font-size: 22px
      margin 25px 0 22px 0
      font-weight: normal;
      font-stretch: normal;
    .home-header
    .home-Middle
      text-align center
      .home-Middle-title
        font-size: 24px
        margin 20px 0
      .See-more
        cursor pointer
        color: #18823A
        text-align right
        margin-right 15px
        margin-bottom 15px
      .Middle-classification-box
        display flex
        .classification-item
          position: relative
          cursor pointer
          background #ececec
          margin-bottom 40px
          flex 1
          margin-right 25px
          .hover-box
            width: 133px;
            transition: all .2s ease-in-out
            .classification-img
              vertical-align middle
            .classification-img img
              width 100%
              vertical-align: middle;
            .Categories-class
              padding 0 5px
              font-size 14px
              line-height 16px
              margin-bottom 10px
          .item-text
            font-size 13px
            display inline-block
            font-weight bold
            color: #656565
            width 125px
            margin-top: 10px;
    .home-process
      text-align center
      .home-process-title
        font-size 24px
        color: #000
      .process-list
        display flex
        margin-top 25px
        .process-item
          flex 1
          .process-icon
            margin auto
            width 110px
            height 110px
          .process-icon img
            height 100%
          .process-content
            width 200px
            margin 0 auto
            line-height 1.3
            margin-top 15px
            font-size 16px
            color: #000
    .home-service
      text-align center
      margin-top 25px
      margin-bottom 25px
      .service-list
        display flex
        .service-itemL
          margin 0 auto
          margin-right 155px
          width 285px
          .item-title
            font-size 24px
          .item-content
            margin-top 10px
            background #ececec
            line-height 1.3
            padding 50px 25px
            border 1px solid #ccc
            border-top-left-radius: 160px 130px
            border-top-right-radius: 160px 130px
            border-bottom-right-radius: 160px 130px
            border-bottom-left-radius: 160px 130px
            font-size 16px
        .service-itemR
          margin 0 auto
          width 425px
          .item-title
            font-size 24px
          .item-content
            margin-top 42px
            background #ececec
            border: 1px solid #ccc
            font-size 16px
            line-height 1.3
            border-radius 10px
            padding 30px
</style>
